@use '../../variables';
@use '../../../../styles/mixins';

$block: '.#{variables.$ns}toc-item';

#{$block} {
    $class: &;

    &__section {
        cursor: pointer;

        & > #{$class}__section-link {
            border-inline-start-color: var(--g-color-line-generic);
        }

        &-link {
            &:focus-visible {
                @include mixins.focus-outline();
                outline-offset: -2px;
                border-radius: calc(var(--g-focus-border-radius) + 2px);
            }

            display: flex;
            align-items: center;
            padding: 6px 6px 6px 12px;
            min-height: 18px;

            color: var(--g-color-text-secondary);
            border-inline-start: 2px solid transparent;
            text-decoration: none;

            &:hover {
                color: var(--g-color-text-complementary);
            }
        }

        @for $i from 1 through 6 {
            $item-padding: 12px * $i;

            &_depth_#{$i} {
                #{$class}__section-link {
                    padding-inline-start: $item-padding;
                }
            }
        }

        &_active > #{$class}__section-link {
            color: var(--g-color-text-primary);
            border-inline-start-color: var(--g-color-line-brand);
        }
    }
}
